import React, {memo, useEffect, useState} from 'react';

import {NewAlbumStyle} from "./style";
import HeaderTitle from '@/components/header-title';
import {getNewAlbumAction} from "../../../../store/actionCreators";
import {shallowEqual, useDispatch, useSelector} from "react-redux";
// import {getNewAlbum} from "@/services/recommendRequest";

export default memo(function NewAlbum() {
  //创建状态，只用于该组件中
  const [myLeft,setMyLeft]=useState(0);


  const dispatch=useDispatch();//使用hook函数，创建dispatch

  const {newAlbums}=useSelector((state) => ({
    //由于我们使用了Immutable,所以此时的state是一个对象,我们需要通过get来获取数据
    newAlbums:state.get("recommend").get("newAlbums"),//获取数据
    //这里的获取数据是从reducer中获取的
  }),shallowEqual);

  //获取数据
  //album/list?limit=10  获取10条数据展示
  useEffect(()=>{
      dispatch(getNewAlbumAction(10));
  },[dispatch]);//成功获取数据


  //定义方法，用于左按钮或者有按钮的单击事件
  function allClick(reason=0) {//传递一个参数，参数默认为0；
    if (reason){//左单击
      setMyLeft(0);
    }else{//右单击
        setMyLeft(-660);
    }
  }


    return (
        <NewAlbumStyle>
          <HeaderTitle title="新碟上架" isMore="更多" moreLink={"/more"}/>
          <div className="new_album_box">
            <div className="btn_left" onClick={()=>{allClick(1)}}>
              
            </div>
            <div className="album_sub">
              {/*宽度为 646 px
                测试后，我们一次要移动 660 px
              */}
              <ul style={{left:myLeft+"px"}}>
                {
                  newAlbums.map((item)=>{
                      return (
                          <li key={item.albumId}>
                            <a className="music_img" href="#/discover/recommend">
                              <div className="mask"/>
                              <img src={item.coverUrl} alt=""/>
                            </a>
                            <a className="musicName" href="#/discover/recommend">
                              {item.albumName}
                            < /a>
                            <a className="singer" href="#/discover/recommend">
                              {item.artistName}
                            </a>
                          </li>
                      )
                  })
                }
              </ul>
            </div>

            <div className="btn_right" onClick={()=>{allClick()}}>
              
            </div>
          </div>
        </NewAlbumStyle>
    );
  }
)
